<template>
  <van-pull-refresh v-model="listMsg.refreshing" @refresh="onRefresh">
    <slot name="tip"></slot>
    <van-empty v-if="showEmpty" :description="emptyDescription" />
    <van-list
      v-else
      v-model:loading="listMsg.loading"
      v-model:error="listMsg.error"
      style="padding-bottom: 1px"
      :finished="listMsg.finished"
      :finished-text="listMsg.pageTotal > 1 && finishedText"
      @load="onLoad"
    >
      <slot name="list" :list="listMsg.list">
        <van-cell v-for="item in list" :key="item" :title="item" />
      </slot>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { postMpDeviceMaterialPage } from "@/api/index";
// import emitter from '@/lib/mitt.js';
// import { debounce } from '@/lib/common.ts';
const route = useRoute();
const router = useRouter();
const props = defineProps({
  // 获取列表数据函数API
  loadingData: {
    type: Function,
    required: true,
    default: postMpDeviceMaterialPage,
  },
  finishedText: {
    type: String,
    default: "没有更多了",
  },
  // 额外查询条件
  queryParams: {
    type: Object,
    default: () => ({}),
  },
  emptyDescription: {
    default: "暂无数据",
    type: String,
  },
});
const emit = defineEmits(["ok", "error"]);
const listMsg = reactive({
  refreshing: false, // 上拉刷新
  finished: false, // 没有更多状态
  loading: false, // 加载状态
  error: false, // 加载失败
  current: 0,
  size: 20,
  pageTotal: 1,
  rowTotal: 0, // 总条数
  list: [],
});
const showEmpty = computed(() => {
  return listMsg.finished && listMsg.list.length == 0 && !listMsg.loading;
});
// 请求数据
const requestList = () => {
  if (listMsg.refreshing) {
    listMsg.list = [];
    listMsg.refreshing = false;
  }
  const params = {
    current: listMsg.current,
    size: listMsg.size,
    ...props.queryParams,
  };
  console.log("params", params);
  props
    .loadingData(params)
    .then((res) => {
      console.log("res", res);
      // emitter.emit('change-listMsg', { ...listMsg, rowTotal: '' });
      // res.data = {
      //   current: 1,
      //   pages: 1,
      //   records: [
      //     {
      //       createTime: "",
      //       id: 1,
      //       orderList: [
      //         {
      //           amount: 2,
      //           avatar: "",
      //           clientUserId: 0,
      //           createTime: "",
      //           id: 0,
      //           nickname: "",
      //           packageName: "",
      //         },
      //         {
      //           amount: 2,
      //           avatar: "",
      //           clientUserId: 0,
      //           createTime: "",
      //           id: 0,
      //           nickname: "",
      //           packageName: "",
      //         },
      //         {
      //           amount: 2,
      //           avatar: "",
      //           clientUserId: 0,
      //           createTime: "",
      //           id: 0,
      //           nickname: "",
      //           packageName: "",
      //         },
      //         {
      //           amount: 2,
      //           avatar: "",
      //           clientUserId: 0,
      //           createTime: "",
      //           id: 0,
      //           nickname: "",
      //           packageName: "",
      //         },
      //         {
      //           amount: 2,
      //           avatar: "",
      //           clientUserId: 0,
      //           createTime: "",
      //           id: 0,
      //           nickname: "",
      //           packageName: "",
      //         },
      //         {
      //           amount: 2,
      //           avatar: "",
      //           clientUserId: 0,
      //           createTime: "",
      //           id: 0,
      //           nickname: "",
      //           packageName: "",
      //         },
      //       ],
      //       status: 0,
      //       totalAmount: 0,
      //     },
      //     {
      //       createTime: "",
      //       id: 1,
      //       orderList: [
      //         {
      //           amount: 2,
      //           avatar: "",
      //           clientUserId: 0,
      //           createTime: "",
      //           id: 0,
      //           nickname: "",
      //           packageName: "",
      //         },
      //       ],
      //       status: 0,
      //       totalAmount: 0,
      //     },
      //   ],
      //   size: 1,
      //   total: 1,
      // };
      if (res.data) {
        if (res.data.current == 1) {
          listMsg.list = res.data.records || [];
        } else {
          listMsg.list = [...listMsg.list, ...res.data.records];
        }
        listMsg.pageTotal = res.data.pages;
        listMsg.rowTotal = res.data.total;
        console.log("listMsg.rowTotal", listMsg.rowTotal);
        listMsg.loading = false;
        // 是否加载完全部
        console.log("listMsg.current", listMsg.current);
        console.log("listMsg.pageTotal", listMsg.pageTotal);
        listMsg.finished = listMsg.current >= listMsg.pageTotal;
        // listMsg.finished = true
        console.log("listMsg", listMsg);
        // emitter.emit('change-listMsg', listMsg);
        emit("ok", listMsg);
      }
    })
    .catch((err) => {
      // listMsg.list = [
      //   {
      //     createTime: "",
      //     deviceId: 0,
      //     deviceNo: "",
      //     materialType: 0,
      //     nickname: "",
      //     userId: 0,
      //   },
      // ];
      listMsg.finished = true;
      listMsg.error = true;
      console.log("err", err);
      emit("error", err);
    });
};
// 加载
const onLoad = () => {
  listMsg.current += 1;
  requestList();
};
// 重新加载数据
const onRefresh = () => {
  console.log("状态", listMsg.refreshing);
  listMsg.list = [];
  // 将 loading 设置为 true，表示处于加载状态
  listMsg.loading = true;
  listMsg.current = 0;
  onLoad();
};
// 监听获取列表的参数变化时触发列表加载
watch(
  () => props.queryParams,
  () => {
    router.replace({
      name: route.name.value,
      query: {
        ...route.query,
        ...props.queryParams,
      },
    });
    onRefresh();
  },
  { deep: true }
);
defineExpose({
  listMsg,
  onRefresh,
});
</script>

<style lang="less" scoped>
.van-pull-refresh {
  height: 100%;
  overflow-y: auto;
  // min-height: calc();
  .van-empty {
    // position: absolute;
    // height: calc(100% - 20px);
    // width: calc(100% - 20px);
    background: #fff;
    // border-radius: 2px;
    border-radius: 4px;
    height: 100%;
  }
}
</style>
